<template>
  <div>
    <div class="up">
    <div class="updown"></div>
      <div class="upin">
         <div class="pic"></div>
      </div>
        <p class="date">
        更新日期：{{ month > 9 ? month : "0" + month }}月{{day > 9 ? day : "0" + day}}日
      </p>
    </div>

    <div class="down">
      <div v-for="(item, index) in hotsongList" 
      :key = "index"
      class="list">
      <span :class="['rank','aa', {'isred': index<3}]">{{Number(index+1)>9? Number(index+1) : '0'+Number(index+1)}}</span>
          <p class="upword">{{item.name}}</p>
          <i class="sq"></i>
          <span class="downword">{{item.ar[0].name}}</span>
          <i class="lis"></i>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      updateTime: '',
      hotsongList: [],
      updateMonth: '',
      updateDate:'',
      month: '',
      day: ''
    }
  },
  created(){
    this.getupdateDate();
    this.getHotsong();
  },
  methods: {
    getupdateDate(){
      this.$http("/top/list?idx=1")
        .then(res => {
          this.updateTime = res.data.playlist.updateTime;
          let updateDate = new Date(this.updateTime);
          this.month = updateDate.getMonth()+1;
          this.day = updateDate.getDate();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getHotsong(){
      this.$http("/top/list?idx=1")
        .then(res => {
          this.hotsongList = res.data.playlist.tracks;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
}
</script>

<style>
.up{
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
}
.updown {
  width: 340px;
  height: 180px;
  color: white;
  z-index: -1;
  position: absolute; 
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover !important; 
  /* background-position: 50%; */
  filter: blur(20px);
  transform: scale(1.5);
  overflow: hidden;
  background-image: url('../../static/img/hot_music_bg_2x.jpg');
}
.upin{
     top: 25%;
  bottom: 0;
  z-index: 2;
  padding-left: 20px;
  box-sizing: border-box;
  position: relative;
}
.pic{
   width: 168px;
  height: 78px;
  background: url(/static/img/index_icon_2x.png) no-repeat;
  background-position: -28px -33px;
  background-size: 168px 112px;
}
.down {
  border-bottom: 1px solid #f4f4f4;
  padding-left: 10px;
  height: 60px;

}
.upword{
    font-size: 16px;
}
.downword{
    font-size: 6px;
    color: grey;
}
.hotsong {
  width: 340px;
  height: 65px;
  margin: 1px 0;
  background-color: wheat;
}
.list{
  position: relative;
  border-bottom: 1px solid #f4f4f4;
    font-size: 18px;
    padding-left: 40px;
}
  .singer {
    color: #666;
    font-size: 12px;
  }
  .rank {
    position: absolute;
    top: 0;
    left: 8px;
    font-size: 18px;
    line-height: 63px;
  }
  .isred {
    color: #f00;
  }
.sq{
  display: inline-block;
  width: 14px;
  height: 10px;
  background-image: url('../../static/img/index_icon_2x.png');
  background-size: 186.75px 109.125px;
  background-position: 0 0;
}
.lis{
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-image: url('../../static/img/index_icon_2x.png');
  background-size: 186.75px 109.125px;
  background-position: -25px 0;
  position: absolute;
  right: 0;
  top: 0;
}
.date {
  margin-top: 50px;
  margin-left: 20px;
  color: #fff;
}
</style>